<template>
  <nut-popup position="bottom" round closeable :style="{ height: '50%' }" v-model:visible="props.addressShow.goodShow">
    <view class="title">货物规格</view>
    <view class="list">
      <nut-cell title="货物长度">
        <template v-slot:link>
          <view class="countBox">
            <nut-input-number min="1" v-model="goodMsg.goodLength" />
          </view>
          <view style="font-weight: 600; color: black">&nbsp;&nbsp;&nbsp;cm</view>
        </template>
      </nut-cell>
      <nut-cell title="货物宽度">
        <template v-slot:link>
          <view class="countBox">
            <nut-input-number min="1" v-model="goodMsg.goodWidth" />
          </view>
          <view style="font-weight: 600; color: black">&nbsp;&nbsp;&nbsp;cm</view>
        </template>
      </nut-cell>
      <nut-cell title="货物高度">
        <template v-slot:link>
          <view class="countBox">
            <nut-input-number min="1" v-model="goodMsg.goodHeight" />
          </view>
          <view style="font-weight: 600; color: black">&nbsp;&nbsp;&nbsp;cm</view>
        </template>
      </nut-cell>
    </view>
    <view class="bottomBtn">
      <nut-button style="width: 350px" color="#0966FF" size="large" type="primary" @click="chooseGood">确&nbsp;&nbsp;定</nut-button>
    </view>
  </nut-popup>
</template>
<script lang="ts" setup>
import { onMounted, ref, reactive, watch } from 'vue'
const props = defineProps<{
  addressShow: {
    WDShow: boolean
    goodShow: boolean
  }
}>()
const emit = defineEmits<{
  (
    e: 'chooseGood',
    Cargo: {
      goodLength: number
      goodWidth: number
      goodHeight: number
    }
  ): void
}>()
const radioVal = ref()
function chooseGood() {
  emit('chooseGood', goodMsg.value)
}
const goodMsg = ref<{
  goodLength: number
  goodWidth: number
  goodHeight: number
}>({
  goodLength: 1,
  goodWidth: 1,
  goodHeight: 1
})
</script>
<style lang="less" scoped>
.title {
  font-size: 32rpx;
  line-height: 100rpx;
  font-weight: 600;
  padding-left: 30rpx;
  height: 100rpx;
}
.list {
  //   margin-top: 100rpx;
  padding: 1rpx 24rpx;
  height: 68%;
  background: rgb(235, 235, 235);
  box-sizing: border-box;
}

.bottomBtn {
  //   margin-left: -20rpx !important;
  padding: 0 25rpx;
  width: 750rpx;
  position: fixed;
  bottom: 10rpx;
  height: 120rpx;
}
</style>
